<div
  cdkDropList
  cdkDropListOrientation="horizontal"
  class="window-switcher__list"
  [ngClass]="{ 'window-switcher__no-scrollbar': !enableScrollbar() }"
  [cdkDropListData]="windowIds()"
  (cdkDropListDropped)="onDropEnd($event)"
>
  @for (windowId of windowIds(); track windowId) {
    <app-window-switcher-item
      cdkDrag
      [window]="windows()[windowId]"
      [activeWindowId]="activeWindowId()"
      [isEditing]="windowId === windowIdEditing"
      [isClosable]="$count > 1"
      [collections]="collections()"
      (clickWindowChange)="onClickWindow($event)"
      (editWindowNameInput)="editWindowNameInput($event)"
      (saveWindowNameChange)="saveWindowName(windowId, $event)"
      (closeWindowChange)="closeWindow(windowId)"
      (contextmenu)="contextMenu($event, tabContextMenu)"
    />
    <nz-dropdown-menu #tabContextMenu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="editWindowNameInput(windowId)">
          <div class="menu-item">
            <span class="menu-icon">
              <app-icon name="edit" />
            </span>
            <span class="menu-text">
              {{ 'EDIT_WINDOW_TEXT' | translate }}
            </span>
          </div>
        </li>
        <li nz-menu-item (click)="duplicateWindow(windowId)">
          <div class="menu-item">
            <span class="menu-icon">
              <app-icon name="copy" />
            </span>
            <span class="menu-text">
              {{ 'DUPLICATE_WINDOW_TEXT' | translate }}
            </span>
          </div>
        </li>
        <!-- divider -->
        <li nz-menu-divider></li>
        @if ($count > 1) {
          <li nz-menu-item (click)="closeWindow(windowId)">
            <div class="menu-item">
              <span class="menu-icon">
                <app-icon name="x-square" />
              </span>
              <span class="menu-text">
                {{ 'CLOSE_WINDOW_TEXT' | translate }}
              </span>
            </div>
          </li>
        }
        <li nz-menu-item (click)="closeWindowsToTheRight($index)">
          <div class="menu-item">
            <span class="menu-icon">
              <app-icon name="circle" />
            </span>
            <span class="menu-text">
              {{ 'CLOSE_WINDOWS_TO_THE_RIGHT_TEXT' | translate }}
            </span>
          </div>
        </li>
        <li nz-menu-item (click)="closeOtherWindows(windowId)">
          <div class="menu-item">
            <span class="menu-icon">
              <app-icon name="circle" />
            </span>
            <span class="menu-text">
              {{ 'CLOSE_OTHER_WINDOWS_TEXT' | translate }}
            </span>
          </div>
        </li>
        @if (closedWindows().length) {
          <li nz-menu-item (click)="reopenClosedTab()">
            <div class="menu-item">
              <span class="menu-icon">
                <app-icon name="plus-square" />
              </span>
              <span class="menu-text">
                {{ 'REOPEN_CLOSED_WINDOW_TEXT' | translate }}
              </span>
            </div>
          </li>
        }
      </ul>
    </nz-dropdown-menu>
  }
  @if (windowIds().length < maxWindowCount) {
    <div class="window-switcher__item" (click)="newWindowChange.emit()">
      {{ 'ADD_NEW_WINDOW_TEXT' | translate }}
    </div>
  }
</div>
